<script setup lang="ts">
import dayjs from "dayjs";
import ReCol from "@/components/ReCol";
import { reactive, ref, onMounted, h, toRaw } from "vue";

import { announcement_list, announcement_lock } from "@/api/user";

const noticesList = ref([]);
const isDialog = ref(false);
const noticeItem = ref();
// 查看公告
function lookNoticeClick(item) {
  announcement_lock({
    readed_id: item.id
  }).then(res => {
    if (res.code == 1000) {
      noticeItem.value = item;
      isDialog.value = true;
      onSearch();
    }
  });
}

onMounted(() => {
  onSearch();
});

async function onSearch() {
  const result = await announcement_list();
  noticesList.value = result.data;
}
</script>

<template>
  <re-col
    v-if="noticesList.length"
    v-motion
    class="mb-[12px]"
    :value="24"
    :xs="24"
    :initial="{
      opacity: 0,
      y: 100
    }"
    :enter="{
      opacity: 1,
      y: 0,
      transition: {
        delay: 640
      }
    }"
  >
    <el-card shadow="never">
      <div class="flex justify-between">
        <b class="text-md font-medium">公告</b>
      </div>
      <div class="noticeInner mt-3">
        <div
          class="item mb-3"
          :class="{ no: !item.is_look }"
          v-for="(item, index) in noticesList"
          :key="index"
          @click="lookNoticeClick(item)"
        >
          <div class="status">
            <span></span>
          </div>
          <div class="info">
            <div class="title">
              <span v-if="!item.is_look">[未读] </span>{{ item.title }}
            </div>
            <div class="time">
              {{ dayjs.unix(item.created_at).format("YYYY-MM-DD HH:mm") }}
            </div>
          </div>
        </div>

        <el-button class="w-full" type="primary" text>查看更多</el-button>
      </div>
    </el-card>

    <el-dialog
      v-model="isDialog"
      :title="noticeItem?.title"
      width="600"
      append-to-body
    >
      <el-scrollbar height="30vh">
        <div v-html="noticeItem?.content"></div>
      </el-scrollbar>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="isDialog = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </re-col>
</template>

<style lang="scss" scoped>
.noticeInner {
  overflow: hidden;

  .item {
    display: flex;
    align-items: start;
    cursor: pointer;

    .status {
      height: 20px;
      padding: 5px 0;
      span {
        width: 10px;
        height: 10px;
        background-color: #e1e1e1;
        border-radius: 50%;
        display: block;
      }
    }

    .info {
      flex: 1;
      overflow: hidden;
      margin-left: 12px;

      .title {
        font-size: 15px;
        line-height: 20px;
        color: #666666;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        span {
          color: #f5a8a8;
        }
      }

      .time {
        font-size: 12px;
        color: #999999;
        margin-top: 2px;
      }
    }

    &.no {
      .status {
        span {
          background-color: #f5a8a8;
        }
      }
    }
  }
}
</style>
